<template>
  <div>
      <div class="wrap">
        <h2>state</h2>
        <p>a:{{ a }}</p>
        <p>b:{{ b }}</p>
      </div>

      <div class="wrap">
        <h2>getters</h2>
        <p>2a:{{ doubleA }}</p>
        <p>2b:{{ doubleB }}</p>
        <p>2(a+b):{{ doubleAB }}</p>
      </div>

      <div class="wrap">
        <h2>mutations</h2>
        <p>
        <button @click="addA">a++</button>
        <button @click="addA_N(10)">a+10</button>
        </p>
        <p><button  @click="$store.commit('addB')">b++</button></p>
      </div>


      <div class="wrap">
        <h2>actions</h2>

        <!-- 不考虑 异步操作是否结束 -->
        <p>
            <button @click="addA_Async">a++</button>
            <button @click="addAN_Async(10)">a+10</button>   
        </p>
        <p><button  @click="addB_Async">b++</button></p>
        <!-- 考虑 异步操作是否结束(Promise状态改变) -->
        <p>
          <button  @click="addBoth">先加a,在加b</button>
          <button  @click="addAB_Async">先加a,在加b</button>
        </p>
      </div>
  </div>
</template>

<script>

  // 手动优化  
  // 1. vuex中提供的内容 => 数据(state,getters) / 方法  ,手动取值太麻烦
  // 2. 数据部分(state,getters) => 是否可以将其通过计算属性 绑定到当前Vue实例, 使用时直接使用计算属性 
  // 3. 函数部分(mutations actions) => 通过methods包裹vuex中的mutations actions


  // 辅助函数

  import { mapState, mapGetters,mapMutations,mapActions } from "vuex";

  /*  
    console.log("映射state",mapState(["a","b","info"]));
     Vue实例中计算属性名和Vuex中的state名保持一直 
     {
        a:function () {
          return this.$store.state.a;
        },
        b:function () {
          return this.$store.state.b;
        },
     }
  
  */

  /* 
    console.log("映射state",mapState({A:"a",B:"b"}));
     Vue实例中计算属性名和Vuex中的state名保持一直 
     {
        A:function () {
          return this.$store.state["a"];
        },
        B:function () {
          return this.$store.state["b"];
        },
     }
  
  
  
  */

     

 /* 
    数据深层映射  => 接收一个回调函数, 回调函数中有一个形参state对象  => 可以自己查找数据
    var obj = mapState({
        a:function(state){  
            return state.a;
        },
        name:function(state){
            return state.info.name;
        }
    })
    console.log();
 */
  
  export default {
      computed:{
        // state部分
        ...mapState(["a","b"]),  // {a,b}

        ...mapGetters(["doubleA","doubleB","doubleAB"]), // {doubleA,doubleB,doubleAB}


        

      },
      methods:{
        // 函数部分
        // 同步
        ...mapMutations(["addA","addB","addA_N"]),  // {addA,addB}

        // 异步
        ...mapActions(["addA_Async","addAN_Async","addB_Async","addAB_Async"]),
       

        addBoth(){
          this.$store.dispatch('addA_Async').then(()=>{
            console.log("a++完毕");
            return this.$store.dispatch('addB_Async');  // 如果then方法返回值也是一个Promise实例,等Promise实例状态改变之后,在向后传递
          }).then(()=>{
            console.log("b++完毕");
          }).catch(err=>{
            console.log("发生错误",err)
          })
        }
      },
      mounted(){
        console.log("store",this.$store);
      }
  }
</script>

<style  scoped>
.wrap{
  padding: 5px;
  border:1px dashed #333;
  margin: 5px;
}
</style>